<!--
 * @Description: 商城商品
 * @Author: wrysunny
 * @Date: 2024-11-22 09:33:38
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-12-11 11:19:54
-->
<template>
	<view class="min-h-[100vh] bg-background pb-[calc(var(--window-bottom))]">
		<view class="bg-white">
			<view class="px-[32rpx] flex items-center">
				<view class="search flex-1">
					<up-icon name="search" color="#999" size="30"></up-icon>
					<input class="input" v-model="keyword" type="text" placeholder="请搜索商品名" @blur="search" />
					<view class="option" @click="search">搜索</view>
				</view>
				<view class="ml-[30rpx]">
					<!-- <up-icon @click="toShopOrder" name="order" color="#000" size="50rpx"></up-icon> -->
					<up-image @click="toShopOrder" :src="beverageOrder" width="60rpx" height="60rpx"></up-image>
				</view>
			</view>
			<view class="flex items-center my-[26rpx] px-[32rpx]">
				<view class="flex justify-between flex-1">
					<view class="flex flex-col justify-center items-center" v-for="item in classList" :key="item.id" @click="switchingSort(item)">
						<view
							class="rounded-[8rpx] border border-white"
							:class="{
								'!border-second': item.id == classId
							}"
						>
							<up-image :src="$setBaseUrl(item.url)" width="76rpx" height="76rpx" radius="8rpx"></up-image>
						</view>
						<view
							:class="{
								'bg-second': item.id == classId,
								'text-[#fff]': item.id == classId
							}"
							class="text-[22rpx] mt-[10rpx] tracking-[1px] p-[4rpx] rounded-[8rpx]"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="text-[22rpx] ml-[32rpx]" @click="classShow = true">
					<view>展</view>
					<view>开</view>
					<up-image :src="arrow" width="20rpx" height="auto" mode="widthFix"></up-image>
				</view>
			</view>
			<view class="flex items-center justify-between px-[46rpx] py-[24rpx] text-[28rpx] text-[#555]">
				<view
					:class="{
						'text-second': item.id == orderById
					}"
					class="flex items-center"
					v-for="item in orderByMap"
					:key="item.id"
					@click="switchingOrderBy(item)"
				>
					<view class="">
						{{ item.name }}
					</view>
					<view class="flex items-center" v-if="item.id == 2">
						<u-image v-if="item.value.isAsc == 'asc'" :src="asc" width="24rpx" height="24rpx"></u-image>
						<u-image v-if="item.value.isAsc == 'desc'" :src="desc" width="24rpx" height="24rpx"></u-image>
					</view>
				</view>
			</view>
		</view>
		<!-- grid grid-cols-2 gap-[22rpx] -->
		<view class="p-[20rpx]" v-if="list.length">
			<up-waterfall v-model="list" ref="uWaterfallRef">
				<template v-slot:left="{ leftList }">
					<view class="mr-[10rpx] mb-[20rpx] last:mb-0" v-for="item in leftList" :key="item.id" @click="toBusinessDetail(item.id)">
						<up-transition :show="true" mode="fade">
							<view class="bg-white rounded-[16rpx] p-[16rpx]">
								<up-lazy-load :image="$setBaseUrl(item.pic)" width="100%" height="100%" mode="widthFix"></up-lazy-load>
								<view class="mt-[16rpx]">
									<view class="text-[28rpx] font-bold line-clamp-1">{{ item.name }}</view>
									<view class="my-[8rpx] text-[24rpx] text-gray">
										<text>{{ item.tagFixationList.join('丨') }}</text>
									</view>
									<view class="flex flex-wrap items-center gap-[8rpx] mb-[8rpx]">
										<view class="tag" v-for="it in item.tagVariableList" :key="it">{{ it }}</view>
									</view>
									<view class="text-gray text-[28rpx]">
										<text class="text-[32rpx] text-[#E5403E] font-bold">{{ item.price }}</text>
										<text class="ml-[8rpx]">元</text>
									</view>
								</view>
							</view>
						</up-transition>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="ml-[10rpx] mb-[20rpx] last:mb-0" v-for="item in rightList" :key="item.id" @click="toBusinessDetail(item.id)">
						<up-transition :show="true" mode="fade">
							<view class="bg-white rounded-[16rpx] p-[16rpx]">
								<up-lazy-load :image="$setBaseUrl(item.pic)" width="100%" height="100%" mode="widthFix"></up-lazy-load>
								<view class="mt-[16rpx]">
									<view class="text-[28rpx] font-bold line-clamp-1">{{ item.name }}</view>
									<view class="my-[8rpx] text-[24rpx] text-gray">
										<text>{{ item.tagFixationList.join('丨') }}</text>
									</view>
									<view class="flex flex-wrap items-center gap-[8rpx] mb-[8rpx]">
										<view class="tag" v-for="it in item.tagVariableList" :key="it">{{ it }}</view>
									</view>
									<view class="text-gray text-[28rpx]">
										<text class="text-[32rpx] text-[#E5403E] font-bold">{{ item.price }}</text>
										<text class="ml-[8rpx]">元</text>
									</view>
								</view>
							</view>
						</up-transition>
					</view>
				</template>
			</up-waterfall>
			<up-loadmore :status="loadmore" />
		</view>
		<up-empty mode="list" marginTop="200rpx" v-else></up-empty>
		<up-popup :show="classShow" mode="top" :safeAreaInsetBottom="false" round="16rpx">
			<view>
				<view class="px-[32rpx] flex items-center">
					<view class="search flex-1">
						<up-icon name="search" color="#999" size="30"></up-icon>
						<input class="input" v-model="keyword" type="text" placeholder="请搜索商品名" @blur="search" />
						<view class="option" @click="search">搜索</view>
					</view>
					<view class="ml-[30rpx]">
						<up-icon @click="toShopOrder" name="order" color="#000" size="50rpx"></up-icon>
					</view>
				</view>
				<view class="px-[32rpx] py-[48rpx]">
					<view class="text-[30rpx]">全部分类</view>
					<view class="grid grid-cols-5 gap-[32rpx] mt-[32rpx]">
						<view class="flex flex-col justify-center items-center" v-for="item in allClassList" :key="item.id" @click="switchingSort(item)">
							<view
								class="rounded-[8rpx] border border-white"
								:class="{
									'!border-second': item.id == classId
								}"
							>
								<up-image :src="$setBaseUrl(item.url)" width="76rpx" height="76rpx" radius="8rpx"></up-image>
							</view>
							<view
								:class="{
									'bg-second': item.id == classId,
									'text-[#fff]': item.id == classId
								}"
								class="text-[22rpx] mt-[10rpx] tracking-[1px] p-[4rpx] rounded-[8rpx]"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="flex items-center justify-center h-[96rpx] w-full border-t border-[#EEEEEE]" @click="classShow = false">
					<view class="text-[26rpx] mr-[8rpx]">收起</view>
					<view class="rotate-[180deg]">
						<up-image :src="arrow" width="20rpx" height="auto" mode="widthFix"></up-image>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import arrow from '@/static/arrow_down.png';
import asc from '@/static/asc.png';
import desc from '@/static/desc.png';
import beverageOrder from '@/static/myOrderMenu/beverageOrder.png';
// import defult from '@/static/defult.png';
import { getGoodsClass, getGoodsList } from '@/config/api/goods';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import utils from '@/utils/utils';
onLoad(async () => {
	await getBusinessClass();
	await resetList();
});
const { list, resetList, uWaterfallRef, loadmore } = useList();
const { orderByMap, orderByParams, orderById, switchingOrderBy } = useOrderBy();
const { keyword, classShow, getBusinessClass, classList, allClassList, classId, switchingSort } = useClass();
// 列表
function useList() {
	onReachBottom(() => {
		if (list.value.length < total.value) {
			loadmore.value = 'loading';
			pagesParams.pageNum++;
			getList();
		} else {
			utils.showToast('已经到底了~');
		}
	});
	const list = ref([]);
	const loadmore = ref('loadmore');
	const uWaterfallRef = ref(null);
	const total = ref(0);
	const pagesParams = reactive({
		type: 1,
		pageNum: 1,
		pageSize: 10
	});
	const getList = async () => {
		try {
			const res = await getGoodsList({
				...pagesParams,
				...orderByParams.value,
				categoryId: classId.value,
				searchKey: keyword.value
			});
			total.value = res.total;
			list.value = list.value.concat(res.rows);
			if (list.value.length >= total.value) {
				loadmore.value = 'nomore';
			} else {
				loadmore.value = 'loading';
			}
		} catch (e) {
			//TODO handle the exception
		}
	};
	const resetList = () => {
		uWaterfallRef.value && uWaterfallRef.value.clear();
		list.value = [];
		pagesParams.pageNum = 1;
		getList();
	};
	return {
		list,
		loadmore,
		getList,
		resetList,
		pagesParams,
		uWaterfallRef,
		total
	};
}
function useOrderBy() {
	const orderById = ref(1);
	const orderByMap = reactive([
		{
			id: 1,
			name: '综合',
			value: {
				orderByColumn: 'id',
				isAsc: 'asc'
			}
		},
		{
			id: 2,
			name: '价格',
			value: {
				orderByColumn: 'price',
				isAsc: 'asc'
			}
		},
		{
			id: 3,
			name: '最新上架',
			value: {
				orderByColumn: 'id',
				isAsc: 'desc'
			}
		}
	]);
	const switchingOrderBy = (item) => {
		orderById.value = item.id;
		if (item.id == 2) {
			switch (item.value.isAsc) {
				case 'asc':
					item.value.isAsc = 'desc';
					break;
				case 'desc':
					item.value.isAsc = 'asc';
					break;
				default:
					item.value.isAsc = 'desc';
					break;
			}
		}
		console.log(item);
		resetList();
	};
	const orderByParams = computed(() => {
		return orderByMap.find((item) => item.id == orderById.value).value;
	});
	return {
		orderByMap,
		switchingOrderBy,
		orderByParams,
		orderById
	};
}
// 分类
function useClass() {
	const keyword = ref('');
	const classShow = ref(false);
	const classList = ref([]);
	const allClassList = ref([]);
	const classId = ref('');
	const getBusinessClass = async () => {
		// 获取分类
		try {
			const res = await getGoodsClass({
				type: 1
			});
			allClassList.value = res.data;
			classList.value = res.data.slice(0, 5);
		} catch (e) {
			//TODO handle the exception
		}
	};
	const switchingSort = (item) => {
		if (item.id == classId.value) {
			classId.value = '';
		} else {
			classId.value = item.id;
		}
		classShow.value = false;
		resetList();
	};
	return {
		keyword,
		classShow,
		classId,
		switchingSort,
		classList,
		allClassList,
		getBusinessClass
	};
}
const toBusinessDetail = (id) => {
	uni.navigateTo({
		url: `/pages/businessDetail/businessDetail?id=${id}`
	});
};
const toShopOrder = () => {
	uni.navigateTo({
		url: '/pages/shopOrder/shopOrder'
	});
};
const search = async () => {
	await resetList();
	classShow.value = false;
};
</script>

<style scoped lang="scss">
.search {
	@apply border border-[#634B45] rounded-[12rpx] h-[72rpx] flex items-center;
	.input {
		@apply text-[28rpx] text-black flex-1;
	}
	.option {
		@apply px-[24rpx] text-second text-[28rpx] border-l border-[#bbb];
	}
}
.tag {
	@apply px-[10rpx] py-[2rpx] bg-[rgba(195,154,113,0.1)] rounded-[4rpx] text-second text-[20rpx] last:mr-0;
}
</style>
